<template>
	<view>
		<view>
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>
		<view v-if="current === 0">
			<view class="wrap">
				<u-waterfall v-model="preList" ref="uWaterfall">
					<template v-slot:left="{leftList}">
						<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
							<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
							<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
							<u-icon name="close-circle-fill" color="#fa3534" size="34" class="u-close" @click="remove(item.id)"></u-icon>
						</view>
					</template>
					<template v-slot:right="{rightList}">
						<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
							<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
							<u-icon name="close-circle-fill" color="#fa3534" size="34" class="u-close" @click="remove(item.id)"></u-icon>
						</view>
					</template>
				</u-waterfall>
				<view>
					<u-upload ref="aUpload" :action="action" :auto-upload="false" :header="obj" name="img"></u-upload>
					<view class="btn">
						<u-button class="u-m-r-5" @click="apSubmit" plain type="error">上传</u-button>
					</view>
				</view>
			</view>
		</view>
		<view v-else-if="current === 1">
			<view class="wrap">
				<u-waterfall v-model="flowList" ref="uWaterfall">
					<template v-slot:left="{leftList}">
						<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
							<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
							<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
							<u-icon name="close-circle-fill" color="#fa3534" size="34" class="u-close" @click="remove(item.id)"></u-icon>
						</view>
					</template>
					<template v-slot:right="{rightList}">
						<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
							<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
							<u-icon name="close-circle-fill" color="#fa3534" size="34" class="u-close" @click="remove(item.id)"></u-icon>
						</view>
					</template>
				</u-waterfall>
				<view>
					<u-upload ref="uUpload" :action="indexAction" :auto-upload="false" :header="obj" name="img"></u-upload>
					<view class="btn">
						<u-button class="u-m-r-5" @click="submit" plain type="error">上传</u-button>
					</view>
				</view>
			</view>
		</view>	
		<view>
			<view>
				<u-modal v-model="xshow" :content="xcontent" ></u-modal>
				<u-modal v-model="show" :content="content" @confirm="reLoadData()"></u-modal>
			</view>
		</view>
	</view>
	
	
</template>

<script>
	
	import api from '../../utils/api.js'
	export default {
		data() {
			return {
				list:[{
					name:"上传预约轮播图"
				},{
					name:"上传首页轮播图"
				}],
				current:0,
				// 上传主页轮播图
				loadStatus: 'loadmore',
				flowList: [],
				preList: [],
				action:"https://yunservice.ltd:8002/rotation_chart/upload?priority=2",
				indexAction:"https://yunservice.ltd:8002/rotation_chart/upload?priority=1",
				obj:{
					token:''
				},
				// 展示信息
				xshow:"",
				xcontent:"",
				show:"",
				content:"",
				roleId:''
			}
		},
		created(){
			
		},
		onLoad() {
			this.addPreData();
			this.addRandomData(); 
			let user = uni.getStorageSync("user")
			this.obj.token = user.token
			this.roleId = user.roleId
			console.log("----------------------------------------------------")
			console.log(this.roleId)
			if (user.roleId === '3' || user.roleId === '4' || user.roleId === '2'){
				this.list.pop()
			}	
			console.log(this.list)
		},
		/*onReachBottom() {
			this.loadStatus = 'loading';
			// 模拟数据加载
			setTimeout(() => {
				this.addRandomData();
				this.loadStatus = 'loadmore';
			}, 1000)
		},*/
		methods: {
			change(index) {
				this.current = index; 
			},
			
			// 首页轮播图
			addPreData(){
				var data = [];
				api.getRotationChartImageByBranchId(2).then(res => {
					console.log(res)
					data = res.data
					for(let i = 0; i < data.length; i++) {
						data[i].image ="http://42.192.166.244/"+data[i].image
						this.preList.push(data[i])
					}
				})
			},
			// 预约轮播图
			addRandomData() {
				var data = [];
				api.getRotationChart(this.globalConst.INDEX_SWAIPPER).then(res => {
					console.log(res)
					data = res.data
					for(let i = 0; i < data.length; i++) {
						data[i].image ="http://42.192.166.244/"+data[i].image
						this.flowList.push(data[i])
					}
				})
				
			},
			remove(id) {
				console.log(id)
				this.$refs.uWaterfall.remove(id);
				api.deleteRotationChart(id).then(res => {
					if (res.code === 0){
						this.xshow = true
						this.xcontent = "删除成功"
					}else{
						this.xshow = true
						this.xcontent = "系统错误"
					}
				})
			},
			submit:function(){
				this.$refs.uUpload.upload()
				this.show = true
				this.content = "上传成功"	
				
			},
			apSubmit:function(){
				this.$refs.aUpload.upload()
				this.show = true
				this.content = "上传成功"
			},
			reLoadData:function(){
				console.log("da")
				uni.redirectTo({
					url:"../m_set_swiper/m_set_swiper",
					success(res) {
						console.log(res)
					}
				})
			}
		}
	}
</script>

<style>
	/* page不能写带scope的style标签中，否则无效 */
	page {
		background-color: rgb(240, 240, 240);
	}
	.btn{
			margin: 0 auto;
			width: 60%;
		}
</style>

<style lang="scss" scoped>
	.demo-warter {
		border-radius: 8px;
		margin: 5px;
		background-color: #ffffff;
		padding: 8px;
		position: relative;
	}
	
	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}
	
	.demo-image {
		width: 100%;
		border-radius: 4px;
	}
	
	.demo-title {
		font-size: 30rpx;
		margin-top: 5px;
		color: $u-main-color;
	}
	
	.demo-tag {
		display: flex;
		margin-top: 5px;
	}
	
	.demo-tag-owner {
		background-color: $u-type-error;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}
	
	.demo-tag-text {
		border: 1px solid $u-type-primary;
		color: $u-type-primary;
		margin-left: 10px;
		border-radius: 50rpx;
		line-height: 1;
		padding: 4rpx 14rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		font-size: 20rpx;
	}
	
	.demo-price {
		font-size: 30rpx;
		color: $u-type-error;
		margin-top: 5px;
	}
	
	.demo-shop {
		font-size: 22rpx;
		color: $u-tips-color;
		margin-top: 5px;
	}
</style>